<template>
  <div class="youshengshu">
      <!--      头部-->
      <ul class="nav" :class="{is_fixed:isFixed==true}">
        <li>
          <router-link to="/index">喜马拉雅</router-link>
        </li>
        <li>
          <router-link to="/search">
            <p class="search" >
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-sousuo"></use>
              </svg>
              搜索
            </p>
          </router-link>
        </li>
        <li><button>打开APP</button></li>
      </ul>
      <!--      导航栏-->
      <div class="navtab" :class="{is_display_none:isFixed}">
        <ul class="nav_tab">
          <li v-for="(item,index) in navlist" v-on:click="change(index)" v-bind:class="{current:index==msg}">
            <router-link to="/youshengshu">{{item.title}}</router-link>
          </li>
        </ul>
      </div>
      <ul class="youshengshu_type">
        <li v-for="(item,index) in typelist">
          <router-link to="/zonghe">
            <img :src="item.images" alt="">
            <span>{{item.title}}</span>
          </router-link>
        </li>
      </ul>
      <img src="../../assets/images/wKgMZl0W1legiUgkAACPrBBFcJ4381.png" alt="">
<!--      <ul class="youshengshu_cont" v-for="(item,index) in list">-->
      <ul class="youshengshu_cont">
<!--小编推荐-->
        <li>
          <div class="con_top">
<!--            <h2>{{item.name}}</h2>-->
            <h2>小编推荐</h2>
<!--            con_top ul-->
            <ul>
              <li v-for="(item,index) in xiaobianlist">
               <router-link to="/details">
                 <div class="cont_images">
                   <img :src="item.images" alt="">
                   <p>
                     <svg class="icon" aria-hidden="true">
                       <use xlink:href="#icon-play"></use>
                     </svg>
                     <span>{{item.listen}}</span>
                   </p>
                 </div>
                 <p>{{item.imgtitle}}</p>
               </router-link>
              </li>
            </ul>
          </div>
          <div class="cont" v-for="(item,index) in xiaobianlist1">
            <div class="con_left">
              <img :src="item.images" alt="">
            </div>
            <div class="con_right">
              <h2>{{item.title}}</h2>
              <span>{{item.des}}</span>
              <p>
                <span class="span_left">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-sound-wave"></use>
                  </svg>
                  {{item.comment}}
                </span>
                <span class="span_right">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-listen"></use>
                  </svg>
                  {{item.listen}}
                </span>
              </p>
            </div>
          </div>
        </li>
<!--女生最爱-->
        <li>
          <div class="con_top">
            <!--            <h2>{{item.name}}</h2>-->
            <h2>女生最爱</h2>
            <!--            con_top ul-->
            <ul>
              <li v-for="(item,index) in nvsheng">
                <router-link to="">
                  <div class="cont_images">
                    <img :src="item.images" alt="">
                    <p>
                      <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-play"></use>
                      </svg>
                      <span>{{item.listen}}</span>
                    </p>
                  </div>
                  <p>{{item.imgtitle}}</p>
                </router-link>
              </li>
            </ul>
          </div>
          <div class="cont" v-for="(item,index) in nvsheng1">
            <div class="con_left">
              <img :src="item.images" alt="">
            </div>
            <div class="con_right">
              <h2>{{item.title}}</h2>
              <span>{{item.des}}</span>
              <p>
                <span class="span_left">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-sound-wave"></use>
                  </svg>
                  {{item.comment}}
                </span>
                <span class="span_right">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-listen"></use>
                  </svg>
                  {{item.listen}}
                </span>
              </p>
            </div>
          </div>
        </li>
<!--男生最爱-->
        <li>
          <div class="con_top">
            <!--            <h2>{{item.name}}</h2>-->
            <h2>男生最爱</h2>
            <!--            con_top ul-->
            <ul>
              <li v-for="(item,index) in nansheng">
                <router-link to="">
                  <div class="cont_images">
                    <img :src="item.images" alt="">
                    <p>
                      <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-play"></use>
                      </svg>
                      <span>{{item.listen}}</span>
                    </p>
                  </div>
                  <p>{{item.imgtitle}}</p>
                </router-link>
              </li>
            </ul>
          </div>
          <div class="cont" v-for="(item,index) in nansheng1">
            <div class="con_left">
              <img :src="item.images" alt="">
            </div>
            <div class="con_right">
              <h2>{{item.title}}</h2>
              <span>{{item.des}}</span>
              <p>
                <span class="span_left">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-sound-wave"></use>
                  </svg>
                  {{item.comment}}
                </span>
                <span class="span_right">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-listen"></use>
                  </svg>
                  {{item.listen}}
                </span>
              </p>
            </div>
          </div>
        </li>
<!--历史风云-->
        <li>
          <div class="con_top">
            <!--            <h2>{{item.name}}</h2>-->
            <h2>历史风云</h2>
            <!--            con_top ul-->
            <ul>
              <li v-for="(item,index) in history">
                <router-link to="">
                  <div class="cont_images">
                    <img :src="item.images" alt="">
                    <p>
                      <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-play"></use>
                      </svg>
                      <span>{{item.listen}}</span>
                    </p>
                  </div>
                  <p>{{item.imgtitle}}</p>
                </router-link>
              </li>
            </ul>
          </div>
        </li>
<!--侠骨柔情-->
        <li>
          <div class="con_top">
            <!--            <h2>{{item.name}}</h2>-->
            <h2>侠骨柔情</h2>
            <!--            con_top ul-->
            <ul>
              <li v-for="(item,index) in xiagu">
                <router-link to="">
                  <div class="cont_images">
                    <img :src="item.images" alt="">
                    <p>
                      <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-play"></use>
                      </svg>
                      <span>{{item.listen}}</span>
                    </p>
                  </div>
                  <p>{{item.imgtitle}}</p>
                </router-link>
              </li>
            </ul>
          </div>
        </li>
<!--宦海浮沉-->
        <li>
          <div class="con_top">
            <!--            <h2>{{item.name}}</h2>-->
            <h2>宦海浮沉</h2>
            <!--            con_top ul-->
            <ul>
              <li v-for="(item,index) in seafloat">
                <router-link to="">
                  <div class="cont_images">
                    <img :src="item.images" alt="">
                    <p>
                      <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-play"></use>
                      </svg>
                      <span>{{item.listen}}</span>
                    </p>
                  </div>
                  <p>{{item.imgtitle}}</p>
                </router-link>
              </li>
            </ul>
          </div>
        </li>
<!--更多推荐-->
        <li>
          <div class="con_top">
            <!--            <h2>{{item.name}}</h2>-->
            <h2>更多推荐</h2>
            <!--            con_top ul-->
          </div>
          <div class="cont" v-for="(item,index) in more">
            <div class="con_left">
              <img :src="item.images" alt="">
            </div>
            <div class="con_right">
              <h2>{{item.title}}</h2>
              <span>{{item.des}}</span>
              <p>
                <span class="span_left">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-sound-wave"></use>
                  </svg>
                  {{item.comment}}
                </span>
                <span class="span_right">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-listen"></use>
                  </svg>
                  {{item.listen}}
                </span>
              </p>
            </div>
          </div>
        </li>
      </ul>
  </div>
</template>

<script>
    export default {
      name: "youshengshu",
      data(){
        return{
          msg:1,
          isFixed:'',
          navlist:[],
          typelist:[],
          // list:[],
          xiaobianlist:[],
          xiaobianlist1:[],
          nvsheng:[],
          nvsheng1:[],

          nansheng:[],
          nansheng1:[],

          history:[],

          xiagu:[],

          seafloat:[],

          more:[]
        }
      },
      methods:{
        change(a){
          this.msg=a;
        },
        handleScroll() {
          // 滚动条偏移量
          let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
          // 要滚动到顶部吸附的元素的偏移量
          let offsetTop = document.querySelector('#app').offsetTop;
          // 如果滚动到顶部了，this.isFixed就为true
          this.isFixed = scrollTop > offsetTop ? true : false;
        }
      },
      mounted() {
        var _this=this;
        this.$http.get('./data/youshengshu.json')
          .then((response)=>{
            //成功之后的
            this.navlist=response.data.navlist;
            this.typelist=response.data.typelist;

            this.xiaobianlist=response.data.xiaobianlist;
            this.xiaobianlist1=response.data.xiaobianlist1;

            this.nvsheng=response.data.nvsheng;
            this.nvsheng1=response.data.nvsheng1;

            this.nansheng=response.data.nansheng;
            this.nansheng1=response.data.nansheng1;

            this.history=response.data.history;

            this.xiagu=response.data.xiagu;

            this.seafloat=response.data.seafloat;

            this.more=response.data.more;
          })
          .catch(function (err) {
            //失败的
            console.log(err);
          })
          .then(function () {
            //总会执行的
            //always executed
          })
        // 监听滚动事件，然后用handleScroll这个方法进行相应的处理
        window.addEventListener('scroll',this.handleScroll)
      }
    }
</script>

<style scoped>
  .is_fixed{
    position: fixed;
    z-index: 2;
    width: 90%;
    background-color: #FFFFFF;
  }
  .is_display_none{
    display: none;
  }
/*<!--  分类-->*/
  .youshengshu_type{
    padding: 10px 20px;
    display: flex;
    justify-content: space-around;
  }
  .youshengshu_type li a{
    color: #666;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 12px;
  }
  .youshengshu_type li a img{
    width: 34px;
    height: 34px;
    margin: 5px auto;
    border-radius: 50%;
  }
  /*广告图片*/
  .youshengshu>img{
    width: 100%;
    margin: 8px 0;
  }
  /*内容*/
  .youshengshu_cont{
    /*background: purple;*/
    margin-bottom: 10px;
    padding: 10px 20px;
  }
  .youshengshu_cont>li{
    margin-top: 30px;
  }
  .youshengshu_cont>li:nth-of-type(1){
    margin-top: 0;
  }
  /*内容里li的头部*/
  .youshengshu_cont .con_top{
    /*background-color: #fff;*/
  }
  .con_top>h2{
    font-size: 18px;
    color: #40404c;
    margin-bottom: 15px;
    font-weight: 700;
  }
  /*con_top ul*/
  .con_top>ul{
    display: flex;
    justify-content: space-around;
    /*background-color: lime;*/
  }
  .con_top>ul li{
    /*border: 1px solid black;*/
    font-size: 13px;
    width: 30%;
  }
  .con_top>ul li a{
    color:#333333;
  }
  .con_top>ul li a>p{
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp:2;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
  }
  .con_top>ul li .cont_images{
    /*width: 109px;*/
    /*height: 109px;*/
    width: 100%;
    position: relative;
  }
  .con_top>ul li .cont_images img{
    width: 100%;
    border-radius: 0 0 4px 4px;
  }
  .con_top>ul li .cont_images>p{
    position: absolute;
    bottom: 3px;
    background-image:linear-gradient(180deg,rgba(3,3,3,0) 9%,rgba(0,0,0,1.58) 100%);
    z-index: 1;
    left: 0;
    width: 100%;
    height: 23px;
    border-radius: 0 0 4px 4px;
  }
  .con_top>ul li .cont_images>p svg{
    margin: 0 3px;
    color:#aeaeae;

  }
  .con_top>ul li .cont_images>p span{
    font-size: 12px;
    color: #FFFFFF;
    letter-spacing: .34px;
    vertical-align: middle;
  }
/*li的内容*/
.cont{
  display: flex;
  /*background-color: palevioletred;*/
  margin-bottom: 10px;
  margin-top: 20px;
}
.con_left{
  width: 30%;
  display: flex;
  align-items: center;
  justify-content: center;
  /*background-color: #fa2800;*/
}
.con_left img{
  width: 100%;
  border-radius: 4px;
}
.con_right{
  /*border:1px solid blue;*/
  width: 66%;
  padding: 10px 0px 10px 10px
}
.con_right>h2{
  color: #333;
  font-size: 16px;
  line-height: 1.38;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.con_right>span{
  font-size: 13px;
  color: #999;
  line-height: 1.38;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
}
.con_right>p{
  margin: 10px 0;
}
.con_right>p>span{
  font-size: 12px;
  color: #999;
}
.span_right{
  margin-left: 20px;
}

</style>
